@tiptap/extension-floating-menu
Advanced tools
@tiptap/extension-floating-menu is an extension for the Tiptap editor that provides a floating menu interface. This menu appears when the user selects text or performs certain actions, offering a convenient way to access formatting options and other editor functionalities.
Floating Menu Initialization
This code initializes the floating menu with a specified HTML element and configuration options for its placement using Tippy.js.
const floatingMenu = FloatingMenu.configure({
element: document.querySelector('.floating-menu'),
tippyOptions: {
placement: 'right',
},
});Custom Menu Items
This code configures the floating menu to include custom menu items such as 'Bold' and 'Italic', which execute corresponding commands when selected.
const floatingMenu = FloatingMenu.configure({
element: document.querySelector('.floating-menu'),
items: [
{ command: 'bold', label: 'Bold' },
{ command: 'italic', label: 'Italic' },
],
});Conditional Display
This code sets up the floating menu to only display when there is a text selection, using a conditional function to determine its visibility.
const floatingMenu = FloatingMenu.configure({
element: document.querySelector('.floating-menu'),
shouldShow: ({ state }) => {
return state.selection.empty === false;
},
});ProseMirror-menu is a menu system for the ProseMirror editor. It provides a way to create and manage menus that can be attached to the editor. Compared to @tiptap/extension-floating-menu, ProseMirror-menu is more generic and requires more manual setup for floating behavior.
Quill is a modern WYSIWYG editor built for compatibility and extensibility. It includes a toolbar that can be customized to float. While Quill offers a comprehensive editor experience, it is a full editor rather than an extension like @tiptap/extension-floating-menu.
Medium-Editor is a clone of the inline editor toolbar found on Medium.com. It provides a floating toolbar that appears when text is selected. It is similar in functionality to @tiptap/extension-floating-menu but is designed as a standalone editor.
Tiptap is a headless wrapper around ProseMirror – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as New York Times, The Guardian or Atlassian.
Documentation can be found on the Tiptap website.
Tiptap is open sourced software licensed under the MIT license.
FAQs
floating-menu extension for tiptap
The npm package @tiptap/extension-floating-menu receives a total of 881,280 weekly downloads. As such, @tiptap/extension-floating-menu popularity was classified as popular.
We found that @tiptap/extension-floating-menu demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
